<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>宠物智能识别系统</title>
  <link rel="stylesheet" href="static/index/css/index.css">
  <link rel="shortcut icon" href="static/icon_img/tubiao.ico"/>
  <link rel="bookmark" href="dist/img/favicon.ico"/>
  <!-- Google Font: Source Sans Pro -->
  <link rel="stylesheet"
        href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
  <!-- Font Awesome -->
  <!-- static/ -->
  <link rel="stylesheet" href="static/index/css/all.min.css">
  <!-- fullCalendar -->
  <link rel="stylesheet" href="static/index/css/main.css">
  <!-- Theme style -->
  <link rel="stylesheet" href="static/index/css/adminlte.min.css">
  <!-- 3d按钮样式-->
  <link rel="stylesheet" href="static/index/css/iconfont.css">
</head>
<body class="hold-transition sidebar-mini">
<div class="wrapper">
  <!-- Navbar -->
  <nav class="main-header navbar navbar-expand navbar-white navbar-light">
    <!-- Left navbar links -->
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" data-widget="pushmenu" href="#" role="button"><i class="fas fa-bars"></i></a>
      </li>
      <li class="nav-item d-none d-sm-inline-block">
       
          {% if session.get('user') == None %}
          <a href="login?page=querypagemsg" class="nav-link">登录
		  </a>
          {% else %}
          <a href="#" id="userlogout">退出</a>  
		  <script>
			  var userlogout = document.getElementById('userlogout');
			  userlogout.onclick = function(){
				 var flag=confirm('您确定退出吗?')
				 if(flag == true){ location.href='/userlogout'}
				 
			  }
		  </script>
          {% endif %}
        
      </li>
    </ul>
	&nbsp;&nbsp;&nbsp;
{% include 'speak_template.html' %}
    <!-- Right navbar links -->
    <ul class="navbar-nav ml-auto">
      <!-- Navbar Search -->
      <li class="nav-item">
        <a class="nav-link" data-widget="navbar-search" href="#" role="button">
          <i class="fas fa-search"></i>
        </a>
      </li>

      <!-- Messages Dropdown Menu -->
      <li class="nav-item dropdown">
        <a class="nav-link" data-toggle="dropdown" href="#">
          <i class="far fa-comments"></i>
          <span class="badge badge-danger navbar-badge"></span>
        </a>
      </li>
      <!-- Notifications Dropdown Menu -->
      <li class="nav-item dropdown">
        <a class="nav-link" data-toggle="dropdown" href="#">
          <i class="far fa-bell"></i>
          <span class="badge badge-warning navbar-badge"></span>
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" data-widget="fullscreen" href="#" role="button">
          <i class="fas fa-expand-arrows-alt"></i>
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" data-widget="control-sidebar" data-slide="true" href="#" role="button">
          <i class="fas fa-th-large"></i>
        </a>
      </li>
    </ul>
  </nav>
  <!-- /.navbar -->

  <!-- Main Sidebar Container  这里搞了颜色渐变--> 
  <aside class="main-sidebar index-gradient elevation-4">
    <!-- Brand Logo -->
    <a href="/?name={{name}}" class="brand-link">
      <img src="static/icon_img/tubiao.png" alt="AdminLTE Logo" class="brand-image img-circle elevation-3"
           style="opacity: .8">
      <span class="brand-text font-weight-light">宠物智能识别系统</span>
    </a>

    <!-- Sidebar -->
    <div class="sidebar">
      <!-- Sidebar user panel (optional) -->
      <div class="user-panel mt-3 pb-3 mb-3 d-flex">
        {% if name== None %}
        <div class="image">
          <img src="static/icon_img/default-150x150.png" class="img-circle elevation-2" alt="User Image">
        </div>
        <div class="info">
          <a href="login?page=index" class="d-block">未登录</a>
        </div>
        {% endif %}
        {% if name!= None %}
        <div class="image">
          <!-- <img src="static/imgs/userpics/{{name}}.png" class="img-circle elevation-2" alt="User Image">  暂时不使用20231022-->
          <img src="http://127.0.0.1:5001/showprofileimg={{name}}" class="img-circle elevation-2" alt="User Image">
        </div>
        <div class="info">
          <a href="userCenter?name={{name}}" class="d-block">{{name}}</a>
        </div>
        {% endif %}
      </div>


      <!-- Sidebar Menu -->
      <nav class="mt-2" style="">
        <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
          <!-- Add icons to the links using the .nav-icon class
               with font-awesome or any other icon font library -->
          <li class="nav-header">基础服务</li>
          <li class="nav-item">
            <a href="querypagemsg?name={{name}}" class="nav-link">
              <i class="nav-icon fas fa-search"></i>
              <p class="index-font">
                宠物信息查询
              </p>
            </a>
          </li>
          <li class="nav-item">
            <a href="identify?name={{name}}" class="nav-link">
              <i class="nav-icon far fa-image"></i>
              <p class="index-font"> 宠物图片识别
              </p>
            </a>
          </li>
          <li class="nav-item">
            <a href="user_com?name={{name}}" class="nav-link">
              <i class="nav-icon fas fa-columns"></i>
              <p class="index-font">
                圈友交流
              </p>
            </a>
          </li>
        </ul>
      </nav>
      <!-- /.sidebar-menu -->
    </div>
    <!-- /.sidebar -->
  </aside>

  <!-- Content Wrapper. Contains page content 这里是显示宠物信息和图片部分-->
  <div class="content-wrapper " style="text-align: center">
    <div class="tab-content" style="text-align: center">
      <div class="tab-empty" style="text-align: center">
       <!-- 这里显示图片和信息 -->
	   <div class="bground_pet">
       <br> <br> <br>
	   {% if name != None%}
      <h1>欢迎用户{{name}}来到宠物信息查询系统</h1>
{% endif %}

       <div class="shell">
           <div class="carousel">
               <ol class="boxs">
				   {% for i in listid %}
				   <li class="box">
				       <img src="displayimg{{i[0]}}" alt="没有">
				   </li>
				   {% endfor%}
               </ol>
           </div>
           <div class="arrows">
               <button class="up"><i class="iconfont icon-shangjiantou"></i></button>
               <button class="next"><i class="iconfont icon-xiajiantou"></i></button>
           </div>
      </div>
	  <script>
	  
	      // 获取外层容器 
	      const shell = document.querySelector('.boxs');
	      // 获取所有子元素 
	      const cells = shell.querySelectorAll('.box');
	      // 获取容器宽度 
	      const cellWidth = shell.offsetWidth;
	      // 获取容器高度 
	      const cellHeight = shell.offsetHeight;
	      // 设置子元素大小为容器高度 
	      const cellSize = cellHeight;
	      // 子元素数量 
	      const cellCount = {{lenid}}; //23
	      // 计算半径 
	      const radius = Math.round((cellSize / 1.8) / Math.tan(Math.PI / cellCount));
	      // 计算每个子元素的角度 
	      const theta = 360 / cellCount;
	      // 当前选中的子元素索引 
	      let selectedIndex = 0;
	      function rotateshell() {
	          // 计算旋转角度 
	          const angle = theta * selectedIndex * -1;
	          // 设置容器的旋转和平移效果 
	          shell.style.transform = 'translateZ(' + -radius + 'px) ' + 'rotateX(' + -angle + 'deg)';
	          // 计算当前选中的子元素索引 
	          const cellIndex = selectedIndex < 0 ? (cellCount - ((selectedIndex * -1) % cellCount)) : (selectedIndex % cellCount);
	          cells.forEach((cell, index) => {
	              if (cellIndex === index) {
	                  // 添加选中样式 
	                  cell.classList.add('selected');
	              } else {
	                  // 移除选中样式 
	                  cell.classList.remove('selected');
	              }
	          });
	      }
	      function selectPrev() {
	          // 选中上一个子元素 
	          selectedIndex--;
	          // 旋转容器 
	          rotateshell();
	      }
	      function selectNext() {
	          // 选中下一个子元素 
	          selectedIndex++;
	          // 旋转容器 
	          rotateshell();
	      }
	      // 获取上一个按钮 
	      const prevButton = document.querySelector('.up');
	      // 绑定点击事件 
	      prevButton.addEventListener('click', selectPrev);
	      // 获取下一个按钮 
	      const nextButton = document.querySelector('.next');
	      // 绑定点击事件 
	      nextButton.addEventListener('click', selectNext);
	      function initshell() {
	          cells.forEach((cell, i) => {
	              // 计算每个子元素的角度 
	              const cellAngle = theta * i;
	              // 设置每个子元素的旋转和平移效果 
	              cell.style.transform = 'rotateX(' + -cellAngle + 'deg) translateZ(' + radius + 'px)';
	          });
	          // 初始化旋转容器 
	          rotateshell();
	      }
	      // 调用初始化函数 
	      initshell();
	  
	      
	  
	  </script>
	  
	  
	  
       </div> <!-- bground_pet -->



      </div>
    </div>
  </div>
  <!-- /.content-wrapper -->
  <!-- Control Sidebar -->
  <aside class="control-sidebar index-gradient">
    <!-- Control sidebar content goes here -->
  </aside>
  <!-- /.control-sidebar -->
</div>
<!-- ./wrapper -->

<!-- jQuery -->
<script src="static/public/jquery/jquery.min.js"></script>
<!-- Bootstrap -->
<script src="static/public/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- jQuery UI -->
<script src="static/public/jquery/jquery-ui.min.js"></script>
<!-- AdminLTE App -->
<script src="static/index/js/adminlte.min.js"></script>
<!-- fullCalendar 2.2.5 -->
<script src="static/index/js/moment.min.js"></script>
<script src="static/index/js/main.js"></script>
<!-- AdminLTE for demo purposes -->
<!-- Page specific script -->
</body>
</html>